<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <Card
      style="width: 100%"
      :tab-list="tabListTitleHeader"
      v-bind="$attrs"
      :active-tab-key="activeKey"
      @tab-change="onTabChange"
    >
      <!-- //群体 -->
      <AudienceGroup v-if="activeKey === '0'"></AudienceGroup>
      <!-- 评论 -->
      <Commment v-if="activeKey === '1'"></Commment>
      <!-- /私信 -->
      <PersonalLetter v-if="activeKey === '2'"></PersonalLetter>
      <!-- 普通匹配 -->
      <Common v-if="activeKey === '3'"></Common>
      <!-- 定向匹配 -->
      <Target v-if="activeKey === '4'"></Target>
    </Card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { Card } from 'ant-design-vue';
  import { reactive, ref, computed, watch } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import AudienceGroup from './components/audienceGroup/index.vue';
  import Commment from './components/comment/index.vue';
  import PersonalLetter from './components/personalLetter/index.vue';
  import Common from './components/common/index.vue';
  import Target from './components/target/index.vue';
  import { useI18n } from "@/hooks/web/useI18n";

  const { t } = useI18n();
  const activeKey = ref('0');
  const tabListTitleHeader = ref([
    {
      key: '0',
      tab: t('sys.informaionMatchaing.columns.advertisement'),
    },
    {
      key: '1',
      tab: t('sys.comment.columns.comment'),
    },
    {
      key: '2',
      tab:  t('sys.audienceGroup.mac'),
    },
    {
      key: '3',
      tab: t('sys.informaionMatchaing.columns.match'),
    },
    {
      key: '4',
      tab: t('sys.informaionMatchaing.columns.orientation'),
    },
  ]);

  function onTabChange(key) {
    activeKey.value = key;
  }
</script>
